<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .box {
            margin: 20px auto;
            width: 600px;
        }

        .btn {
            background-color: rgb(110, 198, 246);
            border: 0;
            border-radius: 4px;
            width: 50px;
            height: 24px;
            font-size: 12px;
            color: white;
            cursor: pointer;
            margin-bottom: 10px;
        }

        .ta {
            width: 100%;
            text-align: center;
            border-collapse: collapse;
        }

        th {
            background-color: #959dad;
            color: #ffffff;
            border: 1px solid #ffffff;
            padding: 8px;
        }

        td {
            background-color: #ffffff;
            border-bottom: 1px solid #959dad;
            height: 40px;
        }

        .login-form {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
        }

        .login-form input {
            margin: 5px 0;
            padding: 4px;
            width: 200px;
        }

        .submit {
            margin-top: 10px;
            padding: 4px 10px;
            cursor: pointer;
        }

        .set,
        .delete {
            margin: 0 5px;
            padding: 2px 8px;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <div class="box">
        <h1>图书管理</h1>
        <button class="btn">+添加</button>
        <table class="ta">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <form class="login-form" style="display:none">
        书名:<input type="text" name="name"><br>
        作者:<input type="text" name="writer"><br>
        出版社:<input type="text" name="commit"><br>
        <button type="button" class="submit">提交</button>
    </form>

    <script src="../axios/form-serialize.js"></script>
    <script>
        const list = [
            { name: '<西游记>', writer: '吴承恩', commit: '任命文学出版社' },
            { name: '<红楼梦>', writer: '曹雪芹', commit: '人民文学出版社' }
        ];

        const tbody = document.querySelector('tbody');
        const form = document.querySelector('.login-form');
        const submit = document.querySelector('.submit');
        const btn = document.querySelector('.btn');

        // 渲染列表
        function listrender() {
            let str = '';
            list.map((item, index) => {
                str += `<tr>
                    <td>${index + 1}</td>
                    <td>${item.name}</td>
                    <td>${item.writer}</td>
                    <td>${item.commit}</td>
                    <td>
                        <button class='set'>修改</button>
                        <button class='delete'>删除</button>
                    </td>
                </tr>`;
            });
            tbody.innerHTML = str;
            deleteadd(); // 绑定删除事件
            change();    // 绑定修改事件
        }

        // 初始渲染
        listrender();

        // 添加功能
        btn.addEventListener('click', function () {
            // 重置表单（避免残留修改时的数据）
            form.reset();
            // 显示表单
            form.style.display = 'block';
            // 按钮样式反馈
            btn.style.backgroundColor = 'grey';
            setTimeout(() => {
                btn.style.backgroundColor = 'rgb(110, 198, 246)';
            }, 500);

            // 先移除可能存在的旧事件（防止冲突）
            submit.removeEventListener('click', handleAdd);
            submit.removeEventListener('click', handleSub);
            // 绑定添加事件
            submit.addEventListener('click', handleAdd);
            listrender()
        });

        // 添加事件的处理函数
        function handleAdd() {
            form.style.display = 'none';
            // 获取表单数据并添加到列表
            const newData = serialize(form, { hash: true, empty: true });
            list.push(newData);
            listrender(); // 重新渲染
        }

        // 修改功能
        // 修改功能：正确绑定事件并传递 index
        function change() {
            const setBtns = document.querySelectorAll('.set');
            setBtns.forEach((item, index) => {
                item.addEventListener('click', function () {
                    // 显示表单并填充当前数据
                    form.style.display = 'block';
                    const currentItem = list[index];
                    document.querySelector('input[name="name"]').value = currentItem.name || '';
                    document.querySelector('input[name="writer"]').value = currentItem.writer || '';
                    document.querySelector('input[name="commit"]').value = currentItem.commit || '';

                    // 移除旧事件（避免冲突）
                    submit.removeEventListener('click', handleAdd);

                    // 定义带参数的修改处理函数（使用闭包保存 index）
                    const handleSub = () => {
                        form.style.display = 'none';
                        const updatedData = serialize(form, { hash: true, empty: true });
                        list.splice(index, 1, updatedData); // 正确使用当前 index
                        listrender();
                    };

                    // 绑定事件（注意：这里是传递函数本身，不是执行结果）
                    submit.addEventListener('click', handleSub);
                });
            });
        }

        // 移除全局的 handleSub 函数（不再需要）
        // function handleSub() { ... }

        // 删除功能
        function deleteadd() {
            const deleteBtns = document.querySelectorAll('.delete');
            deleteBtns.forEach((item, index) => {
                item.addEventListener('click', function () {
                    list.splice(index, 1); // 删除对应数据
                    listrender(); // 重新渲染
                });
            });
        }
        function handleSub() {
            form.style.display = 'none';
            // 更新数据
            const updatedData = serialize(form, { hash: true, empty: true });
            list.splice(index, 1, updatedData);
            listrender(); // 重新渲染
        }
    </script>
</body>

</html>